<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>七里香</title><meta name="author" content="william"><meta name="copyright" content="william"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="好好学习">
<meta property="og:type" content="website">
<meta property="og:title" content="七里香">
<meta property="og:url" content="http://yokeney.gitee.io/my-hexo-blog/page/2/index.html">
<meta property="og:site_name" content="七里香">
<meta property="og:description" content="好好学习">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://yokeney.gitee.io/my-hexo-blog/img/2.png">
<meta property="article:author" content="william">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http://yokeney.gitee.io/my-hexo-blog/img/2.png"><link rel="shortcut icon" href="/my-hexo-blog/img/index.ico"><link rel="canonical" href="http://yokeney.gitee.io/my-hexo-blog/page/2/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/my-hexo-blog/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.min.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/my-hexo-blog/',
  algolia: undefined,
  localSearch: {"path":"/my-hexo-blog/search.xml","preload":false,"languages":{"hits_empty":"找不到您查询的内容：${query}"}},
  translate: undefined,
  noticeOutdate: undefined,
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false},
  copy: {
    success: '复制成功',
    error: '复制错误',
    noSupport: '浏览器不支持'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: '',
  date_suffix: {
    just: '刚刚',
    min: '分钟前',
    hour: '小时前',
    day: '天前',
    month: '个月前'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: '七里香',
  isPost: false,
  isHome: true,
  isHighlightShrink: false,
  isToc: false,
  postUpdate: '2023-05-26 21:25:20'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 6.3.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="/my-hexo-blog/img/2.png" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="sidebar-site-data site-data is-center"><a href="/my-hexo-blog/archives/"><div class="headline">文章</div><div class="length-num">17</div></a><a href="/my-hexo-blog/tags/"><div class="headline">标签</div><div class="length-num">13</div></a><a href="/my-hexo-blog/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-hexo-blog/"><i class="fa-fw iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 分类</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/my-hexo-blog/vueResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> vue</span></a></li><li><a class="site-page child" href="/my-hexo-blog/reactResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> react</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-shenghuo"></i><span> 后台</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/my-hexo-blog/nodeResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> node</span></a></li></ul></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url('/my-hexo-blog/img/1.png')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/my-hexo-blog/">七里香</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/my-hexo-blog/"><i class="fa-fw iconfont icon-shouyex"></i><span> 首页</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-zuixinwenzhang_huaban"></i><span> 分类</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/my-hexo-blog/vueResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> vue</span></a></li><li><a class="site-page child" href="/my-hexo-blog/reactResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> react</span></a></li></ul></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw iconfont icon-shenghuo"></i><span> 后台</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/my-hexo-blog/nodeResources/"><i class="fa-fw iconfont icon-fenlei1"></i><span> node</span></a></li></ul></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="site-info"><h1 id="site-title">七里香</h1><div id="site-subtitle"><span id="subtitle"></span></div><div id="site_social_icons"><a class="social-icon" href="https://github.com/yokeney" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/my-hexo-blog/965660471@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts" id="recent-posts"><div class="recent-post-item"><div class="post_cover left"><a href="/my-hexo-blog/2021/12/30/hello-world/" title="前端最全面试必备技能"><img class="post_bg" src="/my-hexo-blog/img/web.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="前端最全面试必备技能"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/12/30/hello-world/" title="前端最全面试必备技能">前端最全面试必备技能</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-12-30T13:07:06.000Z" title="发表于 2021-12-30 21:07:06">2021-12-30</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">前端面试</a></span></div><div class="content">职场礼仪外在1. 穿着不需要太正式(不要穿正装)， 也不能太随意, 干净利落即可
2. 言行举止得当，说话有礼貌，谦虚中带自信

自我介绍1. 自我介绍要精简，不能太短，更不能太长，一般不要超过5分钟

2. 快速的体现自己的优点，价值

3. 个人基本信息 + 自己擅长的技术(原生，框架) + 项目

4. 不要说太多技术不相关的内容，面试官也不想听

常见问题回答技巧你的优点是什么1.  生活和工作及技能的优点都可以说，且要说的很自信

2. 比如: 喜欢研究技术, 技术的底子还是可以的

3. 比如: 性格比较开朗/随和, 与同事之间的关系都还处得不错, 这样也有利于项目开发

你的缺点是什么1. 每个人都有缺点，但不要把自己的缺点和盘托出，尽量用缺点去变向的 突出你的优点，

2. 比如: 我不太擅长主动跟陌生人唠嗑, 但聊技术/聊需求没任何问题

3. 比如：我这个人很较真，尤其是在开发的时候，遇到bug不解决不下班

离职的原因是什么1. 不能说上家公司坏话，最无奈的说法就是上家公司黄了，或者拖欠工资好几个月

2. 合乎常理，没有太大漏洞

3. 离职理由说一条就够了

 ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/my-hexo-blog/2021/10/15/ts/" title="TypeScript基础知识"><img class="post_bg" src="/my-hexo-blog/img/ts.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="TypeScript基础知识"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/10/15/ts/" title="TypeScript基础知识">TypeScript基础知识</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-10-15T13:28:48.000Z" title="发表于 2021-10-15 21:28:48">2021-10-15</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/ts/">ts</a></span></div><div class="content">第一章 快速入门0、TypeScript简介
TypeScript是JavaScript的超集。
它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

1、TypeScript 开发环境搭建
下载Node.js

64位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x64.msi
32位：https://nodejs.org/dist/v14.15.1/node-v14.15.1-x86.msi


安装Node.js

使用npm全局安装typescript

进 ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/my-hexo-blog/2021/10/15/moongose/" title="moongose入门"><img class="post_bg" src="/my-hexo-blog/img/mongoose.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="moongose入门"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/10/15/moongose/" title="moongose入门">moongose入门</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-10-15T13:07:06.000Z" title="发表于 2021-10-15 21:07:06">2021-10-15</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/mongoose/">mongoose</a></span></div><div class="content">mongoose 介绍Mongoose 是在 node.js 异步环境下对 mongodb 进行便捷操作的对象模型工具。Mongoose
是 NodeJS 的驱动，不能作为其他语言的驱动。
Mongoose 有两个特点

通过关系型数据库的思想来设计非关系型数据库
基于 mongodb 驱动，简化操作

mongoose 的安装以及使用官网

安装

npm i mongoose --save
2、引入 mongoose 并连接数据库
const mongoose = require(&#39;mongoose&#39;);
mongoose.connect(&#39;mongodb://localhost/test&#39;);
如果有账户密码需要采用下面的连接方式：
mongoose.connect(&#39;mongodb://eggadmin:123456@localhost:27017/eggcms&#39;);
3、定义 Schema
数据库中的 Schema，为数据库对象的集合。schema 是 mongoose 里会用到的一种数据模式，可以理解为表结构的定义；每个 sc ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/my-hexo-blog/2021/06/01/Design/" title="最常用的8大JavaScript设计模式，助你提高代码性能"><img class="post_bg" src="/my-hexo-blog/img/1.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="最常用的8大JavaScript设计模式，助你提高代码性能"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/06/01/Design/" title="最常用的8大JavaScript设计模式，助你提高代码性能">最常用的8大JavaScript设计模式，助你提高代码性能</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-06-01T13:56:09.000Z" title="发表于 2021-06-01 21:56:09">2021-06-01</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">设计模式</a></span></div><div class="content">设计模式（Design pattern）  是解决软件开发某些特定问题而提出的一些解决方案也可以理解成解决问题的一些思路。通过设计模式可以帮助我们增强代码的可重用性、可扩充性、 可维护性、灵活性好。我们使用设计模式最终的目的是实现代码的 高内聚 和 低耦合。通俗一点讲的话 打比方面试官经常会问你如何让代码有健壮性。其实把代码中的变与不变分离，确保变化的部分灵活、不变的部分稳定，这样的封装变化就是代码健壮性的关键。而设计模式的出现，就是帮我们写出这样的代码。 设计模式就是解决编程里某类问题的通用模板，总结出来的代码套路就是设计模式。本文章总结下JS在工作中常用的设计模式 ，以帮助大家提高代码性能，增强工作效率！


这种给对象动态地增加职责的方式称为装 饰器(decorator)模式。装饰器模式能够在不改 变对象自身的基础上，在程序运行期间给对象 动态地添加职责。

1234567891011121314var horribleCode = function()&#123;  console.log(’我是一堆你看不懂的老逻辑&#x27;)&#125;// 改成:var horrible ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/my-hexo-blog/2021/03/15/vuepre/" title="2021前端vue面试题"><img class="post_bg" src="/my-hexo-blog/img/vuepre.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="2021前端vue面试题"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/03/15/vuepre/" title="2021前端vue面试题">2021前端vue面试题</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-03-15T13:33:31.000Z" title="发表于 2021-03-15 21:33:31">2021-03-15</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/%E9%9D%A2%E8%AF%95/">面试</a></span></div><div class="content">1. 什么是 MVVM？
MVVM 是Model-View-ModelView的缩写，是一种脱胎于 MVC 模式的设计模式。
Model 代表数据层，负责存放业务相关的数据；
View 代表视图层，负责在页面上展示数据；
ViewModel 是的作用是同步 View 和 Model 之间的关联，其实现同步关联的核心是DOM Listeners和 Data Bindings两个工具。DOMListeners 工具用于监听 View 中 DOM 的变化，并会选择性的传给 Model；Data Bindings 工具用于监听 Model 数据变化，并将其更新给 View。

2.组件通讯父传子
父传子利用props

123456789101112131415161718192021222324252627282930313233343536373839**父组件代码**&lt;template&gt;    &lt;header-box :title-txt=&quot;showTitleTxt&quot;&gt;&lt;/header-box&gt;&lt;/template&gt;&l ...</div></div></div><div class="recent-post-item"><div class="post_cover right"><a href="/my-hexo-blog/2021/01/15/react/" title="react入门基础篇"><img class="post_bg" src="/my-hexo-blog/img/react.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="react入门基础篇"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2021/01/15/react/" title="react入门基础篇">react入门基础篇</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2021-01-15T07:58:33.000Z" title="发表于 2021-01-15 15:58:33">2021-01-15</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/react/">react</a></span></div><div class="content">介绍用于动态构建用户界面的 JavaScript 库(只关注于视图)

发送请求获取数据
处理数据（过滤，整理格式等）
操作DOM呈现页面（React做的事情）React是一个将数据渲染为HTML视图的开源JavaScript库

1.2 原生JavaScript的缺点
原生JavaScript操作DOM繁琐，效率低（DOM-API操作UI）
使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
原生JavaScript没有组件化编码方案，代码复用率很低

【补充】浏览器重绘重排
浏览器重绘(repaint)重排(reflow)与优化[浏览器机制]

重绘(repaint)：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘
重排(reflow)：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排

【补充】模块化与组件化模块理解：向外提供特定功能的js程序, 一般就是一个js文件为什么要拆成模块：随着业务逻辑增加，代码越来越多且复杂。作用：复用js ...</div></div></div><div class="recent-post-item"><div class="post_cover left"><a href="/my-hexo-blog/2020/10/15/vue/" title="vue基础知识"><img class="post_bg" src="/my-hexo-blog/img/vue.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="vue基础知识"></a></div><div class="recent-post-info"><a class="article-title" href="/my-hexo-blog/2020/10/15/vue/" title="vue基础知识">vue基础知识</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2020-10-15T12:41:13.000Z" title="发表于 2020-10-15 20:41:13">2020-10-15</time></span><span class="article-meta tags"><span class="article-meta-separator">|</span><i class="fas fa-tag"></i><a class="article-meta__tags" href="/my-hexo-blog/tags/vue/">vue</a></span></div><div class="content">Vue基础知识前置介绍链接
1、MVC 和 MVVM 区别
MVC
MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写，一种软件设计典范。
Model(模型)：是用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
View(视图)：是应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
Controller(控制器)：是应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。
MVVM
MVVM新增了VM类。
ViewModel层：做了两件事达到了数据的双向绑定，一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。 实现的方式时：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听。
2、为什么data是一个函数
组件的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一分新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实 ...</div></div></div><nav id="pagination"><div class="pagination"><a class="extend prev" rel="prev" href="/my-hexo-blog/"><i class="fas fa-chevron-left fa-fw"></i></a><a class="page-number" href="/my-hexo-blog/">1</a><span class="page-number current">2</span></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="/my-hexo-blog/img/2.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">william</div><div class="author-info__description"> 青山不改，绿水长流</div></div><div class="card-info-data site-data is-center"><a href="/my-hexo-blog/archives/"><div class="headline">文章</div><div class="length-num">17</div></a><a href="/my-hexo-blog/tags/"><div class="headline">标签</div><div class="length-num">13</div></a><a href="/my-hexo-blog/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/yokeney"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/yokeney" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="/my-hexo-blog/965660471@qq.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">加油</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/my-hexo-blog/2023/05/26/VUE3%E9%9B%86%E6%88%90%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%90%8E%E5%8F%B0%E9%80%9A%E7%94%A8%E8%A7%84%E8%8C%83%E6%A8%A1%E7%89%88/" title="VUE3集成企业级后台通用规范模版"><img src="/my-hexo-blog/img/1.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="VUE3集成企业级后台通用规范模版"/></a><div class="content"><a class="title" href="/my-hexo-blog/2023/05/26/VUE3%E9%9B%86%E6%88%90%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%90%8E%E5%8F%B0%E9%80%9A%E7%94%A8%E8%A7%84%E8%8C%83%E6%A8%A1%E7%89%88/" title="VUE3集成企业级后台通用规范模版">VUE3集成企业级后台通用规范模版</a><time datetime="2023-05-26T13:17:48.000Z" title="发表于 2023-05-26 21:17:48">2023-05-26</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-hexo-blog/2023/04/24/%E6%B2%A1%E7%9C%8B%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%E4%B9%8B%E5%89%8D%E5%8E%9F%E6%9D%A5%E6%88%91%E5%AF%B9react18%E4%B8%80%E7%9F%A5%E5%8D%8A%E8%A7%A3/" title="没看这篇文章之前原来我对react18一知半解"><img src="/my-hexo-blog/img/react.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="没看这篇文章之前原来我对react18一知半解"/></a><div class="content"><a class="title" href="/my-hexo-blog/2023/04/24/%E6%B2%A1%E7%9C%8B%E8%BF%99%E7%AF%87%E6%96%87%E7%AB%A0%E4%B9%8B%E5%89%8D%E5%8E%9F%E6%9D%A5%E6%88%91%E5%AF%B9react18%E4%B8%80%E7%9F%A5%E5%8D%8A%E8%A7%A3/" title="没看这篇文章之前原来我对react18一知半解">没看这篇文章之前原来我对react18一知半解</a><time datetime="2023-04-24T09:11:02.000Z" title="发表于 2023-04-24 17:11:02">2023-04-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-hexo-blog/2023/04/24/%E5%8F%B2%E4%B8%8A%E6%9C%80%E5%85%A8Vue3%E6%80%BB%E7%BB%93/" title="史上最全Vue3总结"><img src="/my-hexo-blog/img/1.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="史上最全Vue3总结"/></a><div class="content"><a class="title" href="/my-hexo-blog/2023/04/24/%E5%8F%B2%E4%B8%8A%E6%9C%80%E5%85%A8Vue3%E6%80%BB%E7%BB%93/" title="史上最全Vue3总结">史上最全Vue3总结</a><time datetime="2023-04-24T09:01:19.000Z" title="发表于 2023-04-24 17:01:19">2023-04-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-hexo-blog/2023/04/24/%E4%B8%8EReact18%E7%9A%84%E5%8C%BA%E5%88%AB%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90/" title="Vue与React18的区别深度解析"><img src="/my-hexo-blog/img/vue_vs-react.png" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="Vue与React18的区别深度解析"/></a><div class="content"><a class="title" href="/my-hexo-blog/2023/04/24/%E4%B8%8EReact18%E7%9A%84%E5%8C%BA%E5%88%AB%E6%B7%B1%E5%BA%A6%E8%A7%A3%E6%9E%90/" title="Vue与React18的区别深度解析">Vue与React18的区别深度解析</a><time datetime="2023-04-24T08:39:32.000Z" title="发表于 2023-04-24 16:39:32">2023-04-24</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/my-hexo-blog/2022/10/25/%E6%89%8B%E6%8A%8A%E6%89%8B%E5%B8%A6%E4%BD%A0%E5%86%99%E4%B8%80%E4%B8%AAbabel/" title="手把手教你写babel插件"><img src="/my-hexo-blog/img/babel.webp" onerror="this.onerror=null;this.src='/my-hexo-blog/img/404.jpg'" alt="手把手教你写babel插件"/></a><div class="content"><a class="title" href="/my-hexo-blog/2022/10/25/%E6%89%8B%E6%8A%8A%E6%89%8B%E5%B8%A6%E4%BD%A0%E5%86%99%E4%B8%80%E4%B8%AAbabel/" title="手把手教你写babel插件">手把手教你写babel插件</a><time datetime="2022-10-25T01:10:14.000Z" title="发表于 2022-10-25 09:10:14">2022-10-25</time></div></div></div></div><div class="card-widget card-tags"><div class="item-headline"><i class="fas fa-tags"></i><span>标签</span></div><div class="card-tag-cloud"><a href="/my-hexo-blog/tags/Git/" style="font-size: 1.1em; color: #999">Git</a> <a href="/my-hexo-blog/tags/Vue3/" style="font-size: 1.5em; color: #99a9bf">Vue3</a> <a href="/my-hexo-blog/tags/babel/" style="font-size: 1.1em; color: #999">babel</a> <a href="/my-hexo-blog/tags/mongoose/" style="font-size: 1.1em; color: #999">mongoose</a> <a href="/my-hexo-blog/tags/nginx/" style="font-size: 1.5em; color: #99a9bf">nginx</a> <a href="/my-hexo-blog/tags/react/" style="font-size: 1.5em; color: #99a9bf">react</a> <a href="/my-hexo-blog/tags/react18/" style="font-size: 1.1em; color: #999">react18</a> <a href="/my-hexo-blog/tags/ts/" style="font-size: 1.1em; color: #999">ts</a> <a href="/my-hexo-blog/tags/vue/" style="font-size: 1.1em; color: #999">vue</a> <a href="/my-hexo-blog/tags/vue3/" style="font-size: 1.1em; color: #999">vue3</a> <a href="/my-hexo-blog/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/" style="font-size: 1.1em; color: #999">前端面试</a> <a href="/my-hexo-blog/tags/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/" style="font-size: 1.1em; color: #999">设计模式</a> <a href="/my-hexo-blog/tags/%E9%9D%A2%E8%AF%95/" style="font-size: 1.1em; color: #999">面试</a></div></div><div class="card-widget card-archives"><div class="item-headline"><i class="fas fa-archive"></i><span>归档</span><a class="card-more-btn" href="/my-hexo-blog/archives/" title="查看更多">
    <i class="fas fa-angle-right"></i></a></div><ul class="card-archive-list"><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2023/05/"><span class="card-archive-list-date">五月 2023</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2023/04/"><span class="card-archive-list-date">四月 2023</span><span class="card-archive-list-count">3</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2022/10/"><span class="card-archive-list-date">十月 2022</span><span class="card-archive-list-count">4</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2022/09/"><span class="card-archive-list-date">九月 2022</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2021/12/"><span class="card-archive-list-date">十二月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2021/10/"><span class="card-archive-list-date">十月 2021</span><span class="card-archive-list-count">2</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2021/06/"><span class="card-archive-list-date">六月 2021</span><span class="card-archive-list-count">1</span></a></li><li class="card-archive-list-item"><a class="card-archive-list-link" href="/my-hexo-blog/archives/2021/03/"><span class="card-archive-list-date">三月 2021</span><span class="card-archive-list-count">1</span></a></li></ul></div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站资讯</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">17</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总访问量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2023-05-26T13:25:20.103Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('/my-hexo-blog/img/1.png')"><div id="footer-wrap"><div class="copyright">&copy;2018 - 2023 By william</div><div class="footer_custom_text">关山难越，谁悲失路之人</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="浅色和深色模式转换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="go-up" type="button" title="回到顶部"><i class="fas fa-arrow-up"></i></button></div></div><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="is-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span>  数据库加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div></div></div><div id="search-mask"></div></div><div><script src="/my-hexo-blog/js/utils.js"></script><script src="/my-hexo-blog/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.min.js"></script><script src="/my-hexo-blog/js/search/local-search.js"></script><div class="js-pjax"><script>function subtitleType () {
  if (true) { 
    window.typed = new Typed("#subtitle", {
      strings: ["窗外的麻雀在电线杆上多嘴","你说这一句很有夏天的感觉","手中的铅笔在纸上来来回回","我用几行字形容你是我的谁","秋刀鱼的滋味猫跟你都想了解","初恋的香味就这样被我们寻回","那温暖的阳光像刚摘的鲜艳草莓","你说你舍不得吃掉这一种感觉","雨下整夜我的爱溢出就像雨水","院子落叶跟我的思念厚厚一叠","几句是非也无法将我的热情冷却","你出现在我诗的每一页","雨下整夜我的爱溢出就像雨水","窗台蝴蝶像诗里纷飞的美丽章节","我接着写","把永远爱你写进诗的结尾","你是我唯一想要的了解","雨下整夜我的爱溢出就像雨水","院子落叶跟我的思念厚厚一叠","几句是非也无法将我的热情冷却","你出现在我诗的每一页","那饱满的稻穗幸福了这个季节","而你的脸颊像田里熟透的番茄","你突然对我说七里香的名字很美","我此刻却只想亲吻你倔强的嘴","雨下整夜我的爱溢出就像雨水","院子落叶跟我的思念厚厚一叠","几句是非也无法将我的热情冷却","你出现在我诗的每一页","整夜我的爱溢出就像雨水","窗台蝴蝶像诗里纷飞的美丽章节","我接着写","把永远爱你写进诗的结尾","你是我唯一想要的了解"],
      startDelay: 300,
      typeSpeed: 150,
      loop: true,
      backSpeed: 50
    })
  } else {
    document.getElementById("subtitle").innerHTML = '窗外的麻雀在电线杆上多嘴'
  }
}

if (true) {
  if (typeof Typed === 'function') {
    subtitleType()
  } else {
    getScript('https://cdn.jsdelivr.net/npm/typed.js/lib/typed.min.js').then(subtitleType)
  }
} else {
  subtitleType()
}</script></div><div class="aplayer no-destroy" data-id="22712173" data-server="netease" data-mini="true" data-type="song" data-autoplay="false" data-lrcType="-1"> </div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><script src="https://cdn.jsdelivr.net/npm/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>